<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>商品列表页</title>
    <link rel="stylesheet" href="/static/css/base.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/css/equip.css?v={$staticVersion}"/>
    <link rel="stylesheet" href="/static/css/show/dropload.css?v={$staticVersion}"/>
</head>
    
<body {if $isNewVersion=='false'}style="padding-top: 160px;"{else}style="padding-top: 100px;"{/if}>
    <section class="pf pleft ptop wb-100">
    {if $isNewVersion=='false'}
    <header class="equip-head">
        <form action="gearList">
        <input id="search" type="text" name="w" placeholder="搜索你想要的装备" autocomplete="off">
        <a href="joggers://gearAdvisor" class="measure"><i></i>测一测</a>
        <a href="joggers://gearStore" class="me" style="display: none"><i class="me"></i>我的</a>
        </form>
    </header>
    {/if}
    <nav class="sort-nav line-gray" style="display: ">
        <div class="btn-sort">
            <button {if $order==1} class="on" {/if} data-value="1" data-name="order">综合排序</button>
            <button {if $order==2} class="on" {/if} data-value="2" data-name="order">价格由低到高</button>
            <button {if $order==3} class="on" {/if} data-value="3" data-name="order">价格由高到低</button>
        </div>
        <div class="btn-list">
            <button class="btn-eq" data-id=1>性别<img src="/static/images/icon/fast-forward@2x.png"></button>
            <button class="btn-eq" data-id=2>品类<img src="/static/images/icon/fast-forward@2x.png"></button>
            <button class="btn-eq" data-id=3>价格区间<img src="/static/images/icon/fast-forward@2x.png"></button>
            <button class="btn-eq" data-id=4>品牌<img src="/static/images/icon/fast-forward@2x.png"></button>
        </div>
        <div class="filter-box filter1" style="display: none">
            <button {if $sex==1} class="on" {/if} data-value="1" data-name="sex" data-group="1">男</button>
            <button {if $sex==2} class="on" {/if} data-value="2" data-name="sex" data-group="1">女</button>
            <button {if $sex==3} class="on" {/if} data-value="3" data-name="sex" data-group="1">不限</button>
        </div>
        <div class="filter-box filter2" style="display: none">
            {loop $categoryGroup $k $v}
            <button {if $catId==$v['catId']} class="on" {/if} data-value="$v['catId']" data-name="catId" data-group="2">$v['catName']</button>
            {/loop}
        </div>
        <div class="filter-box filter3" style="display: none">
            {loop $priceGroup $k $v}
            <button {if $price==$k} class="on" {/if} data-value="$k" data-name="price" data-group="3">$v</button>
            {/loop}
        </div>
        <div class="filter-box filter4" style="display: none">
            {loop $brandGroup $k $v}
            <button {if $brand==$v['brandId']}  class="on" {/if} data-value="$v['brandId']" data-name="brand" data-group="4">$v['brandName']</button>
            {/loop}
        </div>                        
    </nav>
    </section>
    <section class="equip-empty showtuijian" style="display:none">
        <!-- <img class="text-img" src="/static/images/text/myssls.png"> -->
        <img src="/static/images/bg/image1_03-min.png">
        <p>没有找到相关产品</p>
        <a class="btn">换一个词搜索试试</a>
    </section>

    <section>
        <h2 class="blue-line f16 line-gray showtuijian" style="display: none">最新推荐</h2>
        <ul class="youlike pn">
            <div class="content">
                <div class="lists"></div>
            </div>
            <script id="template" type="text/html">
            <% for(var i=0;i<list.length;i++){ %>
            <li>
                <a href="equipment?gearId=<%=list[i].gearId%>">
                <img src="<%=list[i].images%>">
                <h6 class="f14 color_dgray omit"><%=list[i].name%></h6>
                <p class="omit color_gray f12 mt5"><%=list[i].shortDesc%></p>
                <p class="color_red f12 mt10">
                    <span class="color-red f14">￥<%=list[i].price%></span>
                    <span class="color_gray fr">热度：<%=list[i].viewCounts%></span>
                </p>
                </a>
            </li>
             <% } %>
            </script> 
        </ul>
    </section>
    <div class="back-top"></div>
    <!-- 最新推荐 -->
<script src="/static/js/show/zepto.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/template-native.js?v={$staticVersion}"></script>
<script src="/static/js/show/dropload.min.js?v={$staticVersion}"></script>
<script src="/static/js/show/zepto.scroll.js?v={$staticVersion}"></script>
<script src="/static/js/show/gear.js?v={$staticVersion}"></script>

<script>
    var isNewVersion = $isNewVersion;
    var domain = "http://"+window.location.host;
function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return r[2]; return ''; //返回参数值
        }
$(function(){
    // 页数
    var page = 0;
    var url =  '/ajax/GearList';
    var isrecommend = false;

    var params = [];
    params['sex'] = '';
    params['brand'] = '';
    params['catId'] = '';
    params['price'] = '';
    params['order'] = '';

    function buildparams(){
        var arr = new Array();
        arr.push('page='+page);
        arr.push('order='+(params['order'].length>0 ? params['order'] : getUrlParam('order')));
        arr.push('w='+encodeURIComponent(getUrlParam('w')));
        if(params['catId']!=null)
            arr.push('catId='+(params['catId'].length>0 ? params['catId'] : getUrlParam('catId')));
        if(params['brand']!=null)
            arr.push('brand='+(params['brand'].length>0 ? params['brand'] : getUrlParam('brand')));
        if(params['sex']!=null)
            arr.push('sex='+(params['sex'].length>0 ? params['sex'] : getUrlParam('sex')));
        if(params['price']!=null)
            arr.push('price='+(params['price'].length>0 ? params['price'] : getUrlParam('price')));

        return '?'+arr.join('&');
    }

    $('.btn-sort button').on('click',function(){ 
        var display  = $(this).hasClass('on');
        $('.btn-sort button').removeClass('on');
        $(this).addClass('on');
        refresh($(this));
    });

    $('.filter-box button').on('click',function(){ 
        var display  = $(this).hasClass('on');
        group = $(this).attr('data-group');
        $('.filter'+group+" button").removeClass('on');

        if(!display){
            $(this).addClass('on');
        }

        $('.btn-list button').eq(group-1).click();
        refresh($(this));        
    });


    $('.btn-list button').on('click',function(){ 
        var id = $(this).attr('data-id');
        var display  = $(this).hasClass('on');

        $('.btn-list button').removeClass('on');
        $('.filter-box').css('display','none');
        if(!display){
            $('.filter'+id).css('display','block');
            $(this).addClass('on');
        }else{
            $('.filter'+id).css('display','none');
        }
    });

    function refresh(_this){
        params[$(_this).attr('data-name')] = $(_this).hasClass('on') ? $(_this).attr('data-value'): null;        
        buildparams();
        var url = domain+'/show/gearList'+buildparams();
        jump(url,isNewVersion);
    }
    var isload = false;
    // dropload
    $('.content').dropload({
        domDown : {
            domNoData : function(){
                return page!=1 ? '<div class="dropload-noData">没有更多了</div>':'';
            }
        },
        scrollArea : window,
        loadDownFn : loaddata
    });

    function loaddata(me){
        if(isload){
            return;
        }
        page++;
        isload=true;
        $.ajax({
            type: 'GET',
            url: url+buildparams(),
            dataType: 'json',
            success: function(data){
                isload = false;
                var arrLen = data.list.length;
                if(arrLen > 0){
                    $('.lists').append(template('template',{'list':data.list}));
                    if(!data.isNext){
                         me.lock();
                         me.noData();
                    }
                }else{
                    if(page==1){
                        $('.showtuijian').css('display','');
                        url = "/ajax/recommendGear";
                        isrecommend = true;
                        page = 0;
                        loaddata(me);
                    }else{
                        me.lock();
                        me.noData();
                    }
                }
                me.resetload();
            },
            error: function(xhr, type){
                me.noData();
                me.resetload();
                isload=false;
            }
        });
    }
});

$("#search").click(function(){
    $(".mask-white").show();
    $("#read-search").focus()
});
var _lastSc = 0;
$(window).scroll(function(){
    var sc=$(window).scrollTop();
    var diff = sc - _lastSc;
    var buffer = 20;
    //console.log(diff);
    if(diff>buffer){
        $('nav').css('display','none');
        _lastSc = sc;
    }else if(diff<0-buffer){
        $('nav').css('display','');
        _lastSc = sc;
    }
    if(sc>_lastSc+buffer){
        _lastSc = sc;
    }
    if(sc>0){
        $(".back-top").css("display","block");
        // $(".back-top").css("left",(rwidth-80)+"px");
        // $(".back-topp").css("top",(rheight-120)+"px");
    }else{
        $(".back-top").css("display","none");
    }
});

$('.back-top').on('click', function(e) {
  $.scrollTo({
    endY: 0,
    duration: 200,
  });
});
</script>
{template 'show/gearSearchComponent'}
</body>
{template 'show/web-gearfooter'}
<script type="text/javascript">
    if(typeof jw === "object" ) {
        jw.api('wv_setnav', JSON.stringify({
            "title": '',
            "nav": getNav([$shopcart,1])
        }), '')
    }
</script>